<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="酒店">
    <meta name="description" content="酒店">
    <title>酒店</title>
    <link rel="stylesheet" href="./css/icon2.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            color:white;
            text-decoration: none;
        }
        a:hover{
            color:yellow;
        }
        .flex-box{
            display: flex;
        }
        .flex-column{
            flex-direction: column;
        }
        .box{
            width: 800px;
            margin: 30px auto 0;
            border: 1px solid black;
        }
        .box .ad{
            display: block;
            width:100%;
        }
        .box .nav{
            padding: 10px;
        }
        .box .nav-inner{
            color:white;
            background-color:#ff697a;
        }
        .box .border-top-bottom{
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .box .col{
            flex: 1;
        }
        .box .border-left-right {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }
        .box .border-bottom{
            border-bottom: 1px solid #ccc;
        }
        .icon-item {
            justify-content: center;
            align-items: center;
            padding: 20px 0;
        }
        .box .item{
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <img class="ad" src="./images/banner.jpg">
        <div class="nav ">
            <div class="nav-inner">
                <div class="flex-box border-top-bottom">
                    <div class="col">
                        <a class="flex-box  flex-column icon-item" href="#">
                            <span>酒店</span>
                            <span class="icon icon-hotel"></span>
                        </a>
                    </div>
                    <div class="col flex-box flex-column border-left-right">
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                    </div>
                    <div class="col flex-box flex-column border-left-right">
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                    </div>    
                    
                </div>
                <div class="flex-box border-top-bottom">
                    <div class="col">
                        <a class="flex-box  flex-column icon-item" href="#">
                            <span>酒店</span>
                            <span class="icon icon-hotel"></span>
                        </a>
                    </div>
                    <div class="col flex-box flex-column border-left-right">
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                    </div>
                    <div class="col flex-box flex-column border-left-right">
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                    </div>    
                    
                </div><div class="flex-box border-top-bottom">
                    <div class="col">
                        <a class="flex-box  flex-column icon-item" href="#">
                            <span>酒店</span>
                            <span class="icon icon-hotel"></span>
                        </a>
                    </div>
                    <div class="col flex-box flex-column border-left-right">
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                    </div>
                    <div class="col flex-box flex-column border-left-right">
                        <a class="item border-bottom" href="#">酒店</a>
                        <a class="item border-bottom" href="#">酒店</a>
                    </div>    
                    
                </div>
            </div>
        </div>
</body>

</html>